import React,{useState}from 'react'
import {Link} from 'react-router-dom'
import api from '../../http/api'
import {useNavigate} from 'react-router-dom'

/* 
  一、React-router-dom提供了两种跳转方法
  1.标签方式进行跳转
  2.编程方式进行跳转
  二、标签方式进行跳转的步骤
  1.导入Link组件：import {Link} from 'react-router-dom'
  2.使用Link标签进行链接:<Link to="/register">没有账号，去注册</Link>
  三、编程方式的跳转实现步骤
  1.导入:import {useNavigate} from 'react-router-dom'
  2.在函数组件中进行调用useNavigate函数产生一个实例，该实例就是以后用来跳转的:  const navigate=useNavigate()
  注意：第二步要放在函数组件里边，不要放在它的闭包中或者子函数中
  3.直接使用: navigate('/')
*/
export default function Login() {
  const [account,setAccount]=useState('giles')
  const [password,setPassword]=useState('123456')
  const navigate=useNavigate()
  const loginApi=async(e)=>{
    e.preventDefault()
    //获取文本框中的账号信息和密码信息
    console.log('account',account);
    console.log('password',password);
    //向后端发送axios网络请求
    let result=await api.users.login({account,password})
    if(result.data.code){
      console.log(result.data.data.token)
      //保存token到localStorage中
      localStorage.setItem("token",result.data.data.token)
      //跳转
      navigate('/',{replace:true})
    }
  }
  return (
    <div>
        <h1>登录</h1>
        <form onSubmit={(e)=>{loginApi(e)}}>
          <div>
            <label>姓名:</label>
            <input type="text" placeholder='请输入用户名' value={account} onChange={(e)=>setAccount(e.target.value)}/>
          </div>
          <div>
            <label>密码:</label>
            <input type="text" placeholder='请输入密码' value={password} onChange={(e)=>setPassword(e.target.value)}/>
          </div>
          <div>
             <input type="submit" value="登录"/>
             <Link to="/register">没有账号，去注册</Link>
          </div>
        </form>
    </div>
  )
}
